<template>
  <div class="flow-container"></div>
</template>

<script>
import { loadLogicFlow } from '@/common/plugins/tools/logicflow'
import FlowElement from '@/credit/components/flow/element/install'
import FlowDnd from '@/credit/components/flow/element/dnd/install'
import '@/credit/components/flow/element/dnd/index.scss'

export default {
  components: {},
  props: {},
  data() {
    return {
      loaded: false,
      lf: null,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.renderFlow()
  },
  methods: {
    async loadFlow() {
      if (this.loaded) return
      await loadLogicFlow(['Control', 'Menu'])
      window.LogicFlow.use(FlowElement)
      window.LogicFlow.use(FlowDnd)
      this.loaded = true
    },

    async renderFlow() {
      await this.loadFlow()

      if (!this.lf) {
        this.lf = new window.LogicFlow({
          container: this.$el,
          stopScrollGraph: true,
          stopZoomGraph: true,
          metaKeyMultipleSelected: true,
          grid: {
            type: 'dot',
            size: 20,
            visible: true,
            config: {
              color: '#ddd',
            },
          },
          keyboard: {
            enabled: true,
          },
          snapline: true,
        })
      }

      this.lf.render(this.lfData)
    },
  },
}
</script>

<style lang="scss" scoped>
.flow-container {
  height: 100vh;
}
</style>
